import React from 'react';
import { Card, Row, Col, Statistic, Typography, Space } from 'antd';
import { useNavigate } from 'react-router-dom';
import {
  UserOutlined,
  VideoCameraOutlined,
  MessageOutlined,
  HeartOutlined,
  BookOutlined,
} from '@ant-design/icons';
import '../../styles/Dashboard.css';

const { Title, Paragraph } = Typography;

const Dashboard = () => {
  const navigate = useNavigate();

  const handleQuickAction = (path) => {
    navigate(path);
  };

  return (
    <div className="dashboard">
      <div className="dashboard-header">
        <div className="custom">
          <Title level={2} className="custom-title">
            欢迎来到 CineMind AI
          </Title>
          <Paragraph className="custom-paragraph">
            您的专属智能电影推荐助手，基于情感分析为您推荐最适合的影片
          </Paragraph>
        </div>
      </div>
      
      <div className="dashboard-main">
        <Card className="dashboard-show">
          <h2>
            功能简介
          </h2>
          <div className="dashboard-show-content">
            <div class="function">
              <div class="function-icon">🚀</div>
              <div class="function-text">
                <h3>情感化电影对话助手</h3>
                <p>与懂你的AI影迷畅聊，解惑情节，共品光影魅力</p>
              </div>
            </div>
            <div class="function">
              <div class="function-icon">🎨</div>
              <div class="function-text">
                <h3>智能多维度影片推荐</h3>
                <p>汇聚热门新片、挖掘个性所爱，精彩永不缺席</p>
              </div>
            </div>
            <div class="function">
              <div class="function-icon">🎯</div>
              <div class="function-text">
                <h3>精准用户画像与推荐</h3>
                <p>深度理解你的独特品味与情感偏好，每一次推荐都直击心灵</p>
              </div>
            </div>
            <div class="function">
              <div class="function-icon">📱</div>
              <div class="function-text">
                <h3>全链路API智能整合</h3>
                <p>无缝协同顶尖AI与多样电影数据库，带来极致的推荐体验</p>
              </div>
            </div>
          </div>
        </Card>
        
        <Card className="dashboard-quick">
          <h2>
            快捷导航
          </h2>
          <div className="dashboard-quick-grid">
            <Card.Grid className="dashboard-quick-item" hoverable onClick={() => handleQuickAction('/recommendation')}>
              <VideoCameraOutlined className="dashboard-quick-icon dashboard-quick-icon-blue" />
              <div>电影推荐</div>
            </Card.Grid>
            <Card.Grid className="dashboard-quick-item" hoverable onClick={() => handleQuickAction('/chat')}>
              <MessageOutlined className="dashboard-quick-icon dashboard-quick-icon-green" />
              <div>智能对话</div>
            </Card.Grid>
            <Card.Grid className="dashboard-quick-item" hoverable onClick={() => handleQuickAction('/guide')}>
              <BookOutlined className="dashboard-quick-icon dashboard-quick-icon-orange" />
              <div>使用指南</div>
            </Card.Grid>
            <Card.Grid className="dashboard-quick-item" hoverable onClick={() => handleQuickAction('/settings')}>
              <UserOutlined className="dashboard-quick-icon dashboard-quick-icon-purple" />
              <div>个人设置</div>
            </Card.Grid>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default Dashboard;